<script setup lang="ts">
import emoji from "@/types/emoji";
import { ArticleAPI } from "@/api/ArticleAPI";

import type { CommentApi, ConfigApi, PostComment } from "@/types/Comment";
import { useUserStore } from "@/stores/userStore";
import { ElMessage, ElMessageBox } from "element-plus";
import { useArticleStore } from "@/stores/articleStore";
import axios from "axios";
//获取文章的store对象
const articleStore = useArticleStore();
const route = useRoute();
const ip = ref("");
//获取用户名store对象
const userStore = useUserStore();
const prop = defineProps<{ comments: CommentApi[] }>();
const config = reactive<ConfigApi>({
  user: {
    id: userStore.userinfo.result.id!,
    username: userStore.userinfo.result.username!,
    avatar: userStore.userinfo.result.avatar!,
    // 评论id数组 建议:存储方式用户id和文章id和评论id组成关系,根据用户id和文章id来获取对应点赞评论id,然后加入到数组中返回
    likeIds: [],
  },
  emoji: emoji,
  comments: [],
});
//发送请求获取本地ip
async function getIp() {
  const response = await axios.get("https://api.ipify.org/?format=json");
  ip.value = response.data.ip;
}
getIp();
// 提交评论事件
const submit = async (
  content: string,
  parentId: number,
  finish: (comment: PostComment) => void
) => {
  content = content.replace(/&nbsp;/gi, "");
  if (!content.trim()) {
    ElMessage({
      type: "error",
      message: "评论内容不能为空",
    });
    return;
  }
  let comment: PostComment = {
    nid: route.params.id as string,
    content: content,
    ip: ip.value,
    pid: parentId,
  };
  const response = await ArticleAPI.PostComments(comment);
  ElMessage({
    type: "success",
    message: response.msg,
  });
  //重新获取评论
  await articleStore.getArticle_comment(route.params.id as string);
};

// 删除评论
const remove = (id: number, finish: () => void) => {
  setTimeout(() => {
    ElMessageBox.confirm("确认删除此评论吗?", "评论", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        finish();
        ArticleAPI.DeletrComments(id);
        ElMessage({
          type: "success",
          message: "删除成功",
        });
      })
      .catch(() => {
        ElMessage({
          type: "info",
          message: "取消删除",
        });
      });
  }, 200);
};

//举报用户
const report = (id: number, finish: () => void) => {
  console.log(id);
  setTimeout(() => {
    finish();
    ElMessage({
      type: "success",
      message: "举报成功,等待管理员审核",
    });
  }, 200);
};

// 点赞按钮事件
const like = async (id: number, finish: () => void) => {
  const response = await ArticleAPI.Coommit_digg(id);
  ElMessage({
    type: "success",
    message: response.data.msg,
  });
  //重新获取评论
  await articleStore.getArticle_comment(route.params.id as string);
};

config.comments = prop.comments;
</script>

<template>
  <div class="comment-view">
    <u-comment
      :config="config"
      :show-size="2"
      @submit="submit"
      @like="like"
      @remove="remove"
      @report="report"
    >
    </u-comment>
  </div>
</template>

<style lang="scss">
.vp-doc ul {
  list-style: none !important;
}

.vp-doc ul,
.vp-doc ol {
  padding-left: 0 !important;
  margin: 0 !important;
}

.vp-doc li + li {
  margin-top: 0px !important;
}
</style>
